<template>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="supplierSearchObj" class="search_prod tl">
        <el-form-item label>
          <el-input size="small" clearable v-model="supplierSearchObj.nickname" placeholder="用户昵称"></el-input>
        </el-form-item>
        <el-form-item label>
          <el-input size="small" clearable v-model="supplierSearchObj.username" placeholder="会员账号"></el-input>
        </el-form-item>

        <el-form-item label>
          <city-cascader
            :level="2"
            :checkStrictly="true"
            placeholder="地区"
            @change="handleItemChange"
          />
        </el-form-item>
        <el-form-item>
          <el-row class="tl">
            <el-col :span="24">
              <el-button
                :loading="$store.state.isLoading"
                size="small"
                class="top_weiy"
                type="primary"
                @click="onSubmit"
              >查询</el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="small"
                class="top_weiy"
                type="primary"
                @click="delSubmit"
              >一键清除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import cityCascader from "@/components/currency/cityCascader/cityCascader";
export default {
  name: "",
  data() {
    return {
      supplierSearchObj: {
        nickname: "",
        username: "",
        province: "",
        city: "",
        area: "",
      }
    };
  },
  components: {
    cityCascader
  },
  methods: {
    handleItemChange(val) {
      val = val || [];
      this.supplierSearchObj.province = val[0] || "";
      this.supplierSearchObj.city = val[1] || "";
      this.supplierSearchObj.area = val[2] || "";
      this.supplierSearchObj.town = val[3] || "";
    },
    delSubmit() {
      this.supplierSearchObj = {
        nickname: "",
        username: "",
        province: "",
        city: "",
        area: "",
        town: ""
      };
      this.$emit("sendSearch", this.supplierSearchObj);
    },
    onSubmit() {
      this.$emit("sendSearch", this.supplierSearchObj);
    }
  }
};
</script>
